<!-- 物业缴费 -->
<template>
  <div class="propertyPayment">
    <!-- 头部信息 -->
    <myheader title="物业缴费" rightBtn="账单记录" @updataInfo="submitRecruit"></myheader>

    <!-- 内容 -->

    <div>
      <li class="propertyPaymentImg">
        <img src="../../../assets/propertyPayment.jpg" alt />
      </li>
      <ul class="propertyPaymentUl">
        <li class="propertyPaymentLi">
          <div>收费单位</div>

          <input type="text" v-model="company" placeholder="请选择项目" />
        </li>
        <van-divider dashed></van-divider>
        <li @click="open">
          <div>缴费项目</div>
          <input type="text" v-model="name" placeholder="请选择项目" />
          <van-action-sheet
            title="请选择缴费类型"
            :show="showSheet"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
            @select="select"
          />
        </li>

        <van-divider dashed></van-divider>

        <li class="propertyPaymentLi_last">
          <div>收费金额</div>
          <input type="number" v-model="price" placeholder="请输入缴费金额" />
        </li>
        <van-divider dashed></van-divider>

        <li class="propertyPaymentLi_date">
          <van-cell title="缴费日期" :value="date" @click="show = true" />

          <van-calendar
            :show="show"
            @confirm="onConfirm"
            @min-date="new Date()"
            :show-confirm="false"
            :round="false"
            position="right"
          />
        </li>
        <van-divider dashed></van-divider>

        <van-divider dashed></van-divider>
        <van-button plain hairline type="primary" size="large" @click="submit">提交</van-button>
      </ul>
    </div>

    <!-- 物业缴费 -->
  </div>
</template>

<script>
import { Notify } from 'vant'
import { Dialog } from 'vant'

export default {
  props: {
    editId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    editId: function () {
      this.init()
    },
  },
  created() {
    this.init()
  },
  data() {
    return {
      show: false,
      date: '2021-7-18',
      showSheet: false,
      name: '',
      company: '智慧小巷',
      projectId: '',
      price: '',
      actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }], // 选项列表
      val: '',
    }
  },
  created() {
    this.init()
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 日期选择组件
    onConfirm(val) {
      this.show = !this.show

      this.date = `${this.formatDate(val)}`
    },
    async init() {
      const res = await this.$axios.get('/property/pay/project/list')
      if (res.data.code == 200) {
        this.actions = res.data.data
      }
    },

    // 选项列表
    open() {
      console.log()
      this.showSheet = !this.showSheet
    },
    // 选择大额选项
    select(actiocns, index) {
      this.name = this.actions[index].name
      let num = index + 1
      this.projectId = num
    },
    // 缴费
    submit() {
      if (this.company == '') {
        Notify({ type: 'warning', message: '缴费单位！' })
        return
      } else if (this.name == '') {
        Notify({ type: 'warning', message: '请选择缴费类型！' })
        return
      } else if (this.price == '') {
        Notify({ type: 'warning', message: '请输入缴纳金额！' })
        return
      } else {
        Dialog.confirm({
          title: '确认缴费内容',
          message: '缴费类型:' + this.name + '缴费金额:' + this.price,
        })
          .then(async () => {
            const res = await this.$axios.post('/property/pay/save', {
              userId: this.$store.getters.getUserInfo.id,
              company: this.company,
              projectId: this.projectId,
              price: this.price,
              payTime: Date.parse(this.date),
            })
            if (res.data.code == 200) {
              Notify({ type: 'success', message: '缴费成功！' })
              this.price = ''
              this.name = ''
            }
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    submitRecruit() {
      this.$router.push('/poperHstory')
    },
  },

  components: {
    myheader,
  },
}
</script>

<style scoped>
.propertyPaymentImg {
  height: 150px;
  width: 100%;
}
.propertyPaymentImg > img {
  width: 100%;
  height: 100%;
}
.propertyPaymentUl {
  padding: 10px 10px 10px 10px;
}
.propertyPaymentUl > li {
  height: 0.7rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 0.4rem;
}
.propertyPaymentUl > li > input {
  text-align: right;
}
</style>
